<template>
  <div class="cardDContainer">
    <div class="cardDLeft">
      <div class="cardDLeftTop">
        <span class="cardDMonth">{{ props.month }}</span>
        <span class="cardDDay">{{ `/${props.day}` }}</span>
      </div>
      <div class="cardDLeftBottom">{{ props.year }}</div>
    </div>
    <div class="cardDRight">
      <div class="cardDRightTop">
        {{ i18nt.constantsOne.twoCard.testTitle }}
      </div>
      <div class="cardDRightBottom">
        {{ i18nt.constantsOne.twoCard.testContent }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";

const props = defineProps({
  year: {
    type: String,
    required: false,
    default: i18nt.value.constantsOne.twoCard.testYear,
  },
  month: {
    type: String,
    required: false,
    default: i18nt.value.constantsOne.twoCard.testMonth,
  },
  day: {
    type: String,
    required: false,
    default: i18nt.value.constantsOne.twoCard.testDay,
  },
});
</script>

<style scoped lang="scss">
.cardDContainer {
  @include relative_hw(132px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  // 仅保留上边框
  border-top: 1px solid #a3a3a3; // 显示上边框
}

.cardDLeft {
  @include relative_hw(132px, 132px);
  flex-direction: column;
  justify-content: center;
  .cardDLeftTop {
    @include relative_hw(70px, 83px);
    margin-left: 30px;
    flex-direction: row;
    line-height: 50px;

    .cardDMonth {
      font-family: "Songti SC-Black";
      font-size: 50px;
      color: #035db9;
    }
    .cardDDay {
      font-family: "Songti SC-Black";
      font-size: 24px;
      color: #035db9;
      margin-top: 12px;
      // display: inline-block;
      // vertical-align: bottom; /* 底部对齐 */
    }
  }
  .cardDLeftBottom {
    @include relative_hw(26px, 46px);
    margin-left: 30px;
    font-family: "PingFang SC-Regular";
    font-size: 19px;
    color: #a3a3a3;
  }
}

.cardDRight {
  @include relative_hw(132px, 594px);
  flex-direction: column;

  .cardDRightTop {
    @include relative_hw(30px, 396px);
    margin-top: 25px;
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-style: normal;
    text-transform: none;
    color: #035db9;
    font-size: 22px;
  }

  .cardDRightBottom {
    margin-top: 14px;

    @include text_limit(2, 496px);

    font-family: "PingFang SC", "PingFang SC";
    font-style: normal;
    text-transform: none;
    color: #a3a3a3;
    font-size: 16px;
  }
}
</style>
